<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui.css">
    <style>
        td {
            text-align: center;
        }
        button {
            height: 20px;
            width: 50px;
        }
        h2 {
            align:"center"
        }
       .th2{
            /*为什么选不起*/
            text-align:center;/** 设置水平方向居中 */
        }
    </style>
</head>
<body>
<div id="app">
    <div v-if="books.length>=1">
        <table class="layui-table">
            <thead>
            <tr>
                <th style=" text-align:center;">序号</th>
                <th style=" text-align:center;">书名</th>
                <th style=" text-align:center;">单价</th>
                <th style=" text-align:center;">数量</th>
                <th style=" text-align:center;">总价</th>
                <th style=" text-align:center;">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in books">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price | showPrice}}</td>
                <td>
                    <button v-on:click="add(index)" >+</button>
                    {{item.amount}}
                    <button v-on:click="subtract(index)" v-bind:disabled="item.amount<=1">-</button>
                </td>
                <td>{{item.sumPrice | showPrice}}</td>
                <td><button v-on:click="remove(index)">移除</button></td>
            </tr>
            </tbody>
        </table>
        <h2  align="right" >合计：{{totalPrice | showPrice}}</h2>
    </div>
    <div v-else="">
        <h2 align="center" >你的购物车空空的快去选点东西吧</h2>
    </div>

</div>
<script src="../../js/common/vue/vue.js"></script>
<script src="common.js"></script>
</body>
</html>